<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<script src="http://172.16.143.102/xxpt/public/js/bootstraptable/bootstrap-table.min.js"></script>


<script src="https://cdn.bootcss.com/bootstrap-table/1.11.0/extensions/cookie/bootstrap-table-cookie.js"></script>
<!—如果想使用中文版也可以引入以下语言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

</head>
<body>
<div class='container'>
<h1>服务器搜索并分页例子(需在服务器下运行)</h1>
<div class="alert alert-info" role="alert">先还原数据库文件subjects.sql，然后在ajax.php里修改数据库配置信息</div>
<form action="" method="post" name="search" id="search">
<div>
搜索：<input type="text" name="search" />
<input type="radio" name="field" value='subject' checked />学科名称
<input type="radio" name="field"  value='code' />学科代码
<input type="submit" value="搜索">
</div>
</form>

<table id="table" data-pagination="true"></table>
</div>
<script>
$(function(){
	$('#table').bootstrapTable('destroy').bootstrapTable({
		showColumns:true,	//显示 内容列下拉框
		cookie:true,
		cookieIdTable:'table2',
		cookieExpire:'2h',
		cookiePath:'/', 
		method : 'post',	// 向服务器请求方式
        contentType : "application/x-www-form-urlencoded",	// 如果是post必须定义
        url : 'ajax.php',	// 请求url
        striped : true, // 隔行变色
        dataType : "json",	// 数据类型
        pagination : true,	// 是否启用分页
        showPaginationSwitch : false, // 是否显示 数据条数选择框
        pageSize : 10, // 每页的记录行数（*）
        pageNumber : 1,		// table初始化时显示的页数
        sidePagination : 'server', // 服务端分页
		queryParamsType:'',  //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort。设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber
		showRefresh : true, // 显示刷新按钮
        silent : true, // 必须设置刷新事件
		queryParams : queryParams,	// 请求参数，这个关系到后续用到的异步刷新
		uniqueId        : 'id',                     // 绑定ID
		sortStable:true,
		pageList:[5,10,25,50,100],  //分页数量

		columns: [{
			field: 'id',
			title: 'ID'
		}, {
			field: 'code',
			title: '学科代码'
		}, {
			field: 'subject',
			title: '学科名称'
		}, {
			field: 'level',
			title: '层级'
		}]
		

	});

	$('#table').bootstrapTable('refresh');

});

    $.fn.serializeObject = function()
    {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    // 分页查询参数，是以键值对的形式设置的
    function queryParams(params) {
		var object = $("#search").serializeObject();        //搜索表单中的内容
		
			object.pageSize = params.pageSize;
			object.pageNumber =  params.pageNumber;
			object.sortName = params.sortName;
			object.sortOrder = params.sortOrder;
		       
        return object
    }

		$(":submit").click(function() {
            $('#table').bootstrapTable('refresh');
            return false;
        });
</script>
</body>
</html>